<template>
  <div style="background-color: #ececec; padding: 20px;">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card :bordered="false">
          <template>
            <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand" :loading="loading">
              <a-tree-node v-for="item in menu" :key="item.id" :title="item.title">
                <template v-if="item.children">
                  <a-tree-node v-for="sub in item.children" :key="sub.id" :title="sub.title" is-leaf/>
                </template>
              </a-tree-node>
            </a-directory-tree>
          </template>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :bordered="false">
          <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
            <a-form-item label="ID" v-show="false">
              <a-input
                  v-decorator="['id']"
              />
            </a-form-item>
            <a-form-item label="父级菜单">
              <a-input
                  v-decorator="['parent_id']"
              />
            </a-form-item>
            <a-divider dashed/>
            <a-form-item label="标题">
              <a-input
                  v-decorator="['title', { rules: [{ required: true, message: '请输入标题' }] }]"
              >
                <a-icon slot="addonBefore" type="tags"/>
              </a-input>
            </a-form-item>
            <a-divider dashed/>
            <a-form-item label="图标">
              <a-input
                  v-decorator="['icon',{ rules: [{ required: true, message: '请输入图标'}] }]"
              >
                <a-icon slot="addonBefore" type="bars"/>
              </a-input>
            </a-form-item>
            <a-divider dashed/>
            <a-form-item label="路径">
              <a-input v-decorator="['uri']"
              >
                <a-icon slot="addonBefore" type="sync"/>
              </a-input>
            </a-form-item>
            <a-divider dashed/>
            <a-form-item label="排序">
              <a-input v-decorator="['order']"
              >
                <a-icon slot="addonBefore" type="ordered-list"/>
              </a-input>
            </a-form-item>
            <a-divider dashed/>
            <a-form-item>
              <a-row>
                <a-col :span="24" :style="{ textAlign: 'right' }">
                  <a-button @click="handleReset">
                    重置
                  </a-button>
                  <a-button :style="{ marginLeft: '120px' }" type="primary" html-type="submit">
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      form: null,
      loading: false,
      menu: []
    }
  },
  mounted () {
    this.form = this.$form.createForm(this)
    this.getMenu()
  },
  methods: {
    handleSubmit: function() {
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确认操作',
            content: '保存后将无法撤回',
            onOk: () => this.$http.post('api/admin/menu', values).then((result) => {
              this.$message.success('编辑成功')
              this.getMenu()
            }, (error) => {
              this.$message.error(error.message)
            })
          })

        }
      })
    },
    getMenu () {
      this.loading = true
      this.$http.get('api/admin/menu').then((result) => {
        this.menu = result
        this.loading = false
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    handleReset () {
      this.form.resetFields()
    },
    handleSelectChange: function() {

    },
    onSelect (keys) {
      this.$http.get(`api/admin/menu/${keys}`).then((result) => {
        this.form.setFieldsValue(result)
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    onExpand () {
      console.log('Trigger Expand')
    }
  }
}
</script>

<style scoped>

</style>